﻿@page "/tree-grid/selection"

@using Syncfusion.Blazor.TreeGrid
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.DropDowns
@*Hidden:Lines*@
@using BlazorDemos
@using ej2_blazor_selfdata
@inherits SampleBaseComponent;
@*End:Hidden*@

<SampleDescription>
    <p>This sample demonstrates the selection feature in Tree Grid, which allows you to select row or cell through simple mouse down or keyboard interaction.</p>
</SampleDescription>
<ActionDescription>
   <p>Selection provides an interactive support to highlight the row or cell that you select. Selection can be done through a simple Mouse down or Keyboard interaction. To enable selection, set <code> AllowSelection</code> as true.</p>
   <p>Tree Grid supports two types of selection which can be set using the <code> TreeGridSelectionSettings->Type </code> property. They are,</p>
   <ul><li><code>SelectionType.Single</code> - Enabled by default. Allows the user to select single row/cell at a time.</li>
        <li><code>SelectionType.Multiple</code> - Allows the user to select more than one row/cell at a time.</li>
   </ul>
  <p>To perform the multi-selection, hold <strong>CTRL</strong> key and click the desired rows/cells. 
     To select range of rows/cells, hold <strong>SHIFT</strong> key and click the rows/cells.</p>
  <p>While using the Tree Grid in a touch device environment, there is an option for multi-selection through single tap on the row and it will show a popup with the multi-selection symbol. Tap the icon to enable multi-selection in a single tap. </p>
  <p>More information on the selection can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/treegrid/selection/'>documentation section</a>.</p>
</ActionDescription>


<div class="col-lg-9 control-section">
    <div class="content-wrapper">
        <div class="row">
              <SfTreeGrid DataSource="@TreeGridData" IdMapping="TaskID" ParentIdMapping="ParentID" TreeColumnIndex="1" Height="315" AllowPaging="true" AllowSelection="true">
                <TreeGridSelectionSettings Type="@GridSelectType" Mode="@GridSelectMode" CellSelectionMode="@GridCellMode"></TreeGridSelectionSettings>
                <TreeGridPageSettings PageSize="2"></TreeGridPageSettings>
                <TreeGridColumns>
                    <TreeGridColumn Field="TaskID" HeaderText="Task ID" Width="80" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="170"></TreeGridColumn>
                    <TreeGridColumn Field="StartDate" HeaderText=" Start Date" Format="d" Type=ColumnType.Date Width="100" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="EndDate" HeaderText="End Date" Format="d" Type=ColumnType.Date Width="100" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="Duration" HeaderText="Duration" Width="100" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="Progress" HeaderText="Progress" Width="100"></TreeGridColumn>
                </TreeGridColumns>
            </SfTreeGrid>
        </div>
    </div>
</div>


<div class="col-lg-3 property-section">
    <table id="property" title="Properties" style="margin-top: 35px;border-collapse:separate;border-spacing: 5px 25px">
        <tr>
            <td style="width: 35%">
                <div style="padding-top: 7px;font-weight:600">Selection Type</div>
            </td>
            <td style="width: 65%;padding-right: 10px">
                <div>
                    <SfDropDownList Width="100%" TValue="string" TItem="DropDownData" @ref="@DropdownType" DataSource="@SelectionTypes" @bind-Value="@SelectType">
                        <DropDownListEvents TValue="string" TItem="DropDownData" ValueChange="TypeChange"></DropDownListEvents>
                        <DropDownListFieldSettings Text="Mode" Value="ID"></DropDownListFieldSettings>
                    </SfDropDownList>
                </div>
            </td>
        </tr>
        <tr>
            <td style="width: 35%">
                <div style="font-weight:600">
                    Selection Mode
                </div>
            </td>
            <td style="width: 65%">
                <div style="padding-right: 10px;padding-bottom: 10px">
                    <div>
                        <SfDropDownList Width="100%" @ref="@DropdownMode" TValue="string" TItem="DropDownData" DataSource="@SelectionModes" @bind-Value="@Mode">
                            <DropDownListEvents TValue="string" TItem="DropDownData" ValueChange="ModeChange"></DropDownListEvents>
                            <DropDownListFieldSettings Text="Mode" Value="ID"></DropDownListFieldSettings>
                        </SfDropDownList>
                    </div>
                </div>
            </td>
        </tr>
        <tr id='cellselection' class="@ShowRow">
            <td style="width: 35%;">
                <div style="font-weight:600">
                    Cell Selection Mode
                </div>
            </td>
            <td style="width: 65%;">
                <div style="padding-right: 10px;padding-bottom: 10px">
                    <div>
                        <SfDropDownList Width="100%" @ref="@DropdownCellMode" TValue="string" TItem="DropDownData" DataSource="@CellSelectionModes" @bind-Value="@CellMode">
                            <DropDownListEvents TValue="string" TItem="DropDownData" ValueChange="CellModeChange"></DropDownListEvents>
                            <DropDownListFieldSettings Text="Mode" Value="ID"></DropDownListFieldSettings>
                        </SfDropDownList>
                    </div>
                </div>
            </td>
        </tr>
    </table>
</div>

<style>
    
    .hidecellmode {
        display: none;

    }

    .showcellmode {
        display: table-row;
    }

</style>

@code{

    public List<SelfReferenceData> TreeGridData { get; set; }

    public List<DropDownData> SelectionTypes { get; set; } = new List<DropDownData>();

    public List<DropDownData> SelectionModes { get; set; } = new List<DropDownData>();

    public List<DropDownData> CellSelectionModes { get; set; } = new List<DropDownData>();

    SfDropDownList<string, DropDownData> DropdownType { get; set; }

    SfDropDownList<string, DropDownData> DropdownMode { get; set; }

    SfDropDownList<string, DropDownData> DropdownCellMode { get; set; }

    public string SelectType { get; set; } = "Single";

    public string Mode { get; set; } = "Row";

    public string CellMode { get; set; } = "Box";

    public string ShowRow { get; set; } = "hide";

    public SelectionType GridSelectType { get; set; } = SelectionType.Single;

    public Syncfusion.Blazor.Grids.SelectionMode GridSelectMode { get; set; } = Syncfusion.Blazor.Grids.SelectionMode.Row;

    public CellSelectionMode GridCellMode { get; set; } = CellSelectionMode.Box;

    public class DropDownData
    {
        public string ID { get; set; }
        public string Mode { get; set; }
    }

    protected override void OnInitialized()
    {
        this.TreeGridData = SelfReferenceData.GetTree().ToList();

        this.SelectionTypes.Add(new DropDownData() { ID = "Single", Mode = "Single" });
        this.SelectionTypes.Add(new DropDownData() { ID = "Multiple", Mode = "Multiple" });

        this.SelectionModes.Add(new DropDownData() { ID = "Row", Mode = "Row" });
        this.SelectionModes.Add(new DropDownData() { ID = "Cell", Mode = "Cell" });

        this.CellSelectionModes.Add(new DropDownData() { ID = "Box", Mode = "Box" });
        this.CellSelectionModes.Add(new DropDownData() { ID = "Flow", Mode = "Flow" });

    }

    public void TypeChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, DropDownData> args)
    {

        if(args.Value == "Multiple")
        {
            GridSelectType = SelectionType.Multiple;
        }
        else if(args.Value == "Single")
        {
            GridSelectType = SelectionType.Single;
        }
        if(args.Value == "Multiple" && DropdownMode.Value == "Cell")
        {
            ShowRow = "showcellmode";
        }
        else
        {
            ShowRow = "hidecellmode";
        }
    }

    public void ModeChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, DropDownData> args)
    {
        if(args.Value == "Cell")
        {
            GridSelectMode = Syncfusion.Blazor.Grids.SelectionMode.Cell;
        }
        if (args.Value == "Row")
        {
            GridSelectMode = Syncfusion.Blazor.Grids.SelectionMode.Row;
        }
        if (args.Value == "Cell" && DropdownType.Value == "Multiple")
        {
            ShowRow = "showcellmode";
        }
        else
        {
            ShowRow = "hidecellmode";
        }
    }

    public void CellModeChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, DropDownData> args)
    {
        if (args.Value == "Flow")
        {
            GridCellMode = CellSelectionMode.Flow;
        }
        if (args.Value == "Box")
        {
            GridCellMode = CellSelectionMode.Box;
        }
    }
}
